import React, { Component } from "react";
// todo NavLink组件的作用是包含了Link的全部的功能，除此之外，增加了高亮的作用
// todo activeClassName用于替换高亮的类名，exact精准匹配
import { NavLink, Route, Switch } from "react-router-dom";

import "./07-styles.css";

class Home extends Component {
  render() {
    return <div>这是首页页面</div>;
  }
}

class About extends Component {
  render() {
    return <div>这是关于页面</div>;
  }
}

class Mine extends Component {
  render() {
    return <div>这是我的页面</div>;
  }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-路由高亮</h2>
        <ul>
          <li>
            <NavLink to="/" activeClassName="select" exact>
              home
            </NavLink>
          </li>
          <li>
            <NavLink to="/about" activeClassName="select">
              about
            </NavLink>
          </li>
          <li>
            <NavLink to="/mine" activeClassName="select">
              mine
            </NavLink>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* <Redirect from="/" to="/home" exact></Redirect> */}
          <Route path="/" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/mine" component={Mine}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
